<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页')" />
    <th:block th:include="include :: statHeader" />

</head>
<body class="gray-bg">
<div class="tenantInfo">
    <div class="row clearfix">
        <div class="left">
            <!-- 卡片s -->
            <div class="card clearfix">
                <div class="card-item">
                    <div class="card-wrap">
                        <div class="icon"><img src="../stat/images/card_icon_01.png" alt=""></div>
                        <div class="name">本月应收<span class="unit">(元)</span></div>
                        <div class="value f-blue"><p id="monShoule"></p></div>
                    </div>
                </div>
                <div class="card-item">
                    <div class="card-wrap">
                        <div class="icon"><img src="../stat/images/card_icon_03.png" alt=""></div>
                        <div class="name">本月已收<span class="unit">(元)</span></div>
                        <div class="value f-orange"><p id="monAlready"></p></div>
                    </div>
                </div>
                <div class="card-item">
                    <div class="card-wrap">
                        <div class="icon"><img src="../stat/images/card_icon_02.png" alt=""></div>
                        <div class="name">本月已缴<span class="unit">(户)</span></div>
                        <div class="value f-green"><p id="monTenant"></p></div>
                    </div>
                </div>

                <div class="card-item">
                    <div class="card-wrap">
                        <div class="icon"><img src="../stat/images/card_icon_04.png" alt=""></div>
                        <div class="name">本月未缴<span class="unit">(户)</span></div>
                        <div class="value f-red"><p id="TenantNot"></p></div>
                    </div>
                </div>
            </div>
            <!-- 卡片e -->
            <!-- 租户情况s -->
            <div class="zhqk col-04">
                <div class="zhqk-wrap clearfix" id="buildingDetail">
                </div>
            </div>
            <!-- 租户情况e -->
        </div>

        <div class="right">
            <!-- 涨租信息展示s -->
            <div class="zzxx">
                <div class="titleBar tabs-bar">
                    <ul>
                        <li class="selected">待涨租信息预警</li>
                        <li>已涨租信息展示</li>
                    </ul>
                </div>
                <!-- 待涨租信息预警表格s -->
                <div class="tabs">
                    <div class="table">
                        <div class="thead">
                            <ul>
                                <li>
                                    <p>楼栋</p>
                                    <p>单元号</p>
                                    <p>租户名称</p>
                                    <p>涨租时间</p>
                                    <p>操作</p>
                            </ul>
                        </div>
                        <div class="tbody scrollbar">
                            <div th:each="listNot,higherStat : ${listNot}">
                                <ul>
                                    <li>
                                        <p th:text="${listNot.buildingName}">楼栋</p>
                                        <p th:text="${listNot.unitNameStr}">单元号</p>
                                        <p th:text="${listNot.tenantName}">租户名称</p>
                                        <p th:text="${#calendars.format(listNot.risePriceFirstTime,'yyyy-MM-dd')}">涨租时间</p>
                                        <p><a href="javascript:void(0)" class="btn upTenant">确认涨租</a></p>
                                        <input type="hidden" id="tenantId" name="tenantId" th:value="${listNot.tenantId}">
                                        <input type="hidden" id="risePriceRatio" name="risePriceRatio" th:value="${listNot.risePriceRatio}">
                                        <input type="hidden" id="monthlyRentFee" name="monthlyRentFee" th:value="${listNot.monthlyRentFee}">

                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- 待涨租信息预警表格e -->
                <!-- 已涨租信息展示表格s -->
                <div class="tabs none">
                    <!-- 表格s -->
                    <div class="table">

                        <div class="thead">
                            <ul>
                                <li>
                                    <p>楼栋</p>
                                    <p>单元号</p>
                                    <p>租户名称</p>
                                    <p>已涨租时间</p>
                                    <p>状态</p>

                                <li>
                            </ul>
                        </div>
                        <div class="tbody scrollbar">
                            <div th:each="listAlread,tenantStat : ${listAlread}">
                                <ul>
                                    <li>
                                        <p th:text="${listAlread.buildingName}">楼栋</p>
                                        <p th:text="${listAlread.unitNameStr}">单元号</p>
                                        <p th:text="${listAlread.tenantName}">租户名称</p>
                                        <p th:text="${#calendars.format(listAlread.createTime,'yyyy-MM-dd')}">涨租时间</p>
                                        <p class="f-darkRed">已涨租</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- 表格e -->
                </div>

                <!-- 已涨租信息展示表格e -->
            </div>
            <!-- 涨租信息展示e -->
        </div>

    </div>
    <div class="echarts clearfix">
        <div class="echartsBox">
            <!-- 应收租金一览 -->
            <div id="chartOne" style="height:344px; width:100%;"></div>
        </div>
        <div class="echartsBox">
            <!-- 实收租金一览 -->
            <div id="chartTwo" style="height:344px; width:100%;"></div>
        </div>
        <div class="echartsBox">
            <!-- 十大租户收租情况 -->
            <div id="chartThree" style="height:344px; width:100%;"></div>
        </div>
        <div class="echartsBox">
            <!-- 涨租情况一览 -->
            <div id="chartFour" style="height:344px; width:100%;"></div>
        </div>
        <div class="echartsBox">
            <!-- 租户人数一览 -->
            <div id="chartFive" style="height:344px; width:100%;"></div>
        </div>
        <div class="echartsBox">
            <!-- 出租单元一览 -->
            <div id="chartSix" style="height:344px; width:100%;"></div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
    <th:block th:include="include :: statFooter" />
<script>
//首页待涨租预警框待确认涨租
$(".upTenant").click(function() {
    var that = $(this);
    $.modal.confirm("确认涨租吗？", function () {
        var tenantId = that.parent().parent().find("input").eq(0).val();
        var risePriceRatio = that.parent().parent().find("input").eq(1).val();
        var monthlyRentFee = that.parent().parent().find("input").eq(2).val();

        var data = new Array();
        data.push({"name": "tenantId", "value": tenantId});
        data.push({"name": "risePriceRatio", "value": risePriceRatio});
        data.push({"name": "monthlyRentFee", "value": monthlyRentFee});
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx + "system/higher/confirm",
            async: true,
            data: data,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                window.location.reload();
            }

        });
    });
});




    var prefix = ctx + "system/higher/list";

    //滑动条美化
    $(".scrollbar").mCustomScrollbar({
        theme: "minimal-dark"
    });
    //tabs切换
    $(".tabs-bar li").click(function () {
        var index = $(this).index(".tabs-bar li");
        $(this).addClass("selected").siblings().removeClass("selected");
        $($(".tabs")[index]).show().siblings(".tabs").hide();
    });

    //绘制单个div
    function setDiv(data){
        var div = '<div class="col">\n' +
            '                        <div class="title">'+data.bulidingName+'</p></div>\n' +
            '                        <div class="item">\n' +
            '                            <div class="icon"><img src="../stat/images/zhqk_icon_01.png" alt=""></div>\n' +
            '                            <div class="value">'+data.unitRenting+'<span class="unit">户</span></div>\n' +
            '                            <div class="name">在租单元</div>\n' +
            '                        </div>\n' +
            '                        <div class="item">\n' +
            '                            <div class="icon"><img src="../stat/images/zhqk_icon_02.png" alt=""></div>\n' +
            '                            <div class="value">'+data.unitFree+'<span class="unit">户</span></div>\n' +
            '                            <div class="name">空闲单元</div>\n' +
            '                        </div>\n' +
            '                        <div class="item">\n' +
            '                            <div class="icon"><img src="../stat/images/zhqk_icon_03.png" alt=""></div>\n' +
            '                            <div class="value">'+data.alreadyFee+'<span class="unit">元</span></div>\n' +
            '                            <div class="name">本月已收金额</div>\n' +
            '                        </div>\n' +
            '                        <div class="item">\n' +
            '                            <div class="icon"><img src="../stat/images/zhqk_icon_04.png" alt=""></div>\n' +
            '                            <div class="value">'+data.tenantAlready+'<span class="unit">户</span></div>\n' +
            '                            <div class="name">本月已缴用户</div>\n' +
            '                        </div>\n' +
            '                    </div>';
        return div
    }


    $(function() {
        //应收租金一览
        var chartOne = echarts.init(document.getElementById("chartOne"));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var result = params[0].name;
                    params.forEach(function (item) {
                        result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
                    });
                    return result;
                },
                axisPointer: {
                    type: 'none'
                }
            },
            legend: {
                x: 'right',
                y: 'top',
                itemGap: 16,
                padding: [23, 20, 0, 0],
                data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
                textStyle: {
                    color: '#555',
                    fontSize: '13',
                }
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
                    '10月', '11月', '12月'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '应收租金一览',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, -20],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}元',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '全园区',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#4c83fd",
                        lineStyle: {
                            width: 1.5,
                            color: "#4c83fd",
                        }
                    }
                },
                data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
            }, {
                name: 'A栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#f9ab22",
                        lineStyle: {
                            width: 1.5,
                            color: "#f9ab22",
                        }
                    }
                },
                data: [379, 88, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
            }, {
                name: 'B栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#7dc855",
                        lineStyle: {
                            width: 1.5,
                            color: "#7dc855",
                        }
                    }
                },
                data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
            }, {
                name: 'C栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#fe5e5e",
                        lineStyle: {
                            width: 1.5,
                            color: "#fe5e5e",
                        }
                    }
                },
                data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
            }, {
                name: 'D栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#b07cc5",
                        lineStyle: {
                            width: 1.5,
                            color: "#b07cc5",
                        }
                    }
                },
                data: [79, 548, 65, 188, 37, 267, 56, 284, 68, 288, 64, 182, ],
            }]
        };

        //应收租金一览

        //实收租金一览
        var chartTwo = echarts.init(document.getElementById("chartTwo"));
        var option2 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var result = params[0].name;
                    params.forEach(function (item) {
                        result += "</br>" + item.marker + " " + item.seriesName + " : " + item.value + "元 ";
                    });
                    return result;
                },
                axisPointer: {
                    type: 'none'
                }
            },
            legend: {
                x: 'right',
                y: 'top',
                itemGap: 16,
                padding: [23, 20, 0, 0],
                data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
                textStyle: {
                    color: '#555',
                    fontSize: '13',
                }
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
                    '10月', '11月', '12月'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '实收租金一览',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, -20],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}元',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '全园区',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#4c83fd",
                        lineStyle: {
                            width: 1.5,
                            color: "#4c83fd",
                        }
                    }
                },
                data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
            }, {
                name: 'A栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#f9ab22",
                        lineStyle: {
                            width: 1.5,
                            color: "#f9ab22",
                        }
                    }
                },
                data: [379, 88, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
            }, {
                name: 'B栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#7dc855",
                        lineStyle: {
                            width: 1.5,
                            color: "#7dc855",
                        }
                    }
                },
                data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
            }, {
                name: 'C栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#fe5e5e",
                        lineStyle: {
                            width: 1.5,
                            color: "#fe5e5e",
                        }
                    }
                },
                data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
            }, {
                name: 'D栋',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#b07cc5",
                        lineStyle: {
                            width: 1.5,
                            color: "#b07cc5",
                        }
                    }
                },
                data: [79, 548, 65, 188, 37, 267, 56, 284, 68, 288, 64, 182, ],
            }]
        };
        //实收租金一览

        //十大租户收租情况
        var chartThree = echarts.init(document.getElementById("chartThree"));
        var option3 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var name = params[0].name + "</br>";
                    var str = '';
                    var series_colors = ['#538ffe'];
                    for (var i = 0; i < params.length; i++) {
                        params[i].marker =
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                            series_colors[i] + "'></span>";
                        str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "元<br/>";
                    }
                    return name + str;
                },
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['陈沁怡', '李俊楠', '吴迪阳', '陈齐羽', '谢天佳', '李志涛', '许金欣', '陆军达', '吴莺音',
                    '李黎昕'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '五大租户收租情况',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, 7],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}元',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '收租金额',
                type: 'bar',
                barWidth: 14,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#5784ff'
                            },
                                {
                                    offset: 1,
                                    color: '#a0b9ff'
                                }
                            ]
                        )
                    }
                },
                data: [1767, 1496, 1384, 1268, 1188, 1064, 982, 879, 788, 665],
            }]
        };
        //十大租户收租情况
        //涨租情况一览
        var chartFour = echarts.init(document.getElementById("chartFour"));
        var option4 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var name = params[0].name + "</br>";
                    var str = '';
                    var series_colors = ['#538ffe', '#ff6767'];
                    var unit = ['元', '户'];
                    for (var i = 0; i < params.length; i++) {
                        params[i].marker =
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                            series_colors[i] + "'></span>";
                        str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + unit[i] + "<br/>";
                    }
                    return name + str;
                },
            },
            legend: {
                x: 'right',
                y: 'top',
                itemGap: 16,
                padding: [23, 20, 0, 0],
                data: ['增收情况', '涨租户数'],
                textStyle: {
                    color: '#555',
                    fontSize: '13',
                }
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
                    '10月', '11月', '12月'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '涨租情况一览',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, 7],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '增收情况',
                type: 'bar',
                barWidth: 14,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#5784ff'
                            },
                                {
                                    offset: 1,
                                    color: '#a0b9ff'
                                }
                            ]
                        )
                    }
                },
                data: [1767, 1296, 1484, 1068, 2188, 1264, 1582, 1279, 1588, 1265, 1888, 1067],
            }, {
                name: '涨租户数',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        color: "#fe5e5e",
                        lineStyle: {
                            width: 2,
                            color: "#fe5e5e",
                        }
                    }
                },
                data: [179, 248, 165, 288, 137, 367, 156, 384, 768, 388, 164, 282, ],
            }]
        };

        //涨租情况一览
        //租户人数一览
        var chartFive = echarts.init(document.getElementById("chartFive"));
        var option5 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var name = params[0].name + "</br>";
                    var str = '';
                    var series_colors = ['#538ffe', '#ff6767', '#7dc855', '#fe5e5e', '#b07cc5'];
                    for (var i = 0; i < params.length; i++) {
                        params[i].marker =
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                            series_colors[i] + "'></span>";
                        str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "人<br/>";
                    }
                    return name + str;
                },
            },
            legend: {
                x: 'right',
                y: 'top',
                itemGap: 16,
                padding: [23, 20, 0, 0],
                data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
                textStyle: {
                    color: '#555',
                    fontSize: '13',
                }
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
                    '10月', '11月', '12月'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '租户人数一览',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, 5],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '全园区',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#5784ff",
                        lineStyle: {
                            width: 1.5,
                            color: "#5784ff",
                        }
                    }
                },
                data: [767, 996, 884, 1068, 1088, 964, 1082, 979, 888, 965, 788, 1067],
            }, {
                name: 'A栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#f9ab22'
                            },
                                {
                                    offset: 1,
                                    color: '#ffcd75'
                                }
                            ]
                        )
                    }
                },
                data: [379, 288, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
            }, {
                name: 'B栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#7dc855'
                            },
                                {
                                    offset: 1,
                                    color: '#abea8a'
                                }
                            ]
                        )
                    }
                },
                data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
            }, {
                name: 'C栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#fe5e5e'
                            },
                                {
                                    offset: 1,
                                    color: '#ff9494'
                                }
                            ]
                        )
                    }
                },
                data: [179, 248, 165, 288, 137, 367, 156, 384, 268, 388, 164, 282, ],
            }, {
                name: 'D栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#b07cc5'
                            },
                                {
                                    offset: 1,
                                    color: '#d1a3e3'
                                }
                            ]
                        )
                    }
                },
                data: [79, 548, 165, 188, 37, 267, 256, 284, 168, 288, 264, 182, ],
            }, ]
        };

        //租户人数一览
        //出租单元一览
        var chartSix = echarts.init(document.getElementById("chartSix"));
        var option6 = {
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var name = params[0].name + "</br>";
                    var str = '';
                    var series_colors = ['#538ffe', '#ff6767', '#7dc855', '#fe5e5e', '#b07cc5'];
                    for (var i = 0; i < params.length; i++) {
                        params[i].marker =
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:" +
                            series_colors[i] + "'></span>";
                        str = str + params[i].marker + params[i].seriesName + "：" + params[i].value + "户<br/>";
                    }
                    return name + str;
                },
            },
            legend: {
                x: 'right',
                y: 'top',
                itemGap: 16,
                padding: [23, 20, 0, 0],
                data: ['全园区', 'A栋', 'B栋', 'C栋', 'D栋'],
                textStyle: {
                    color: '#555',
                    fontSize: '13',
                }
            },
            grid: {
                show: 'true',
                borderWidth: '0',
                left: '24',
                right: '20',
                top: '72',
                bottom: '40',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    //	rotate: 35,
                    interval: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
                    '10月', '11月', '12月'
                ]
            }],
            yAxis: [{
                type: 'value',
                name: '出租单元一览',
                nameTextStyle: {
                    color: "#333333",
                    padding: [0, 0, 20, 5],
                    fontSize: 16,
                    fontWeight: 700,
                },
                splitLine: {
                    lineStyle: {
                        color: '#f4f4f4',
                    }
                },
                axisLabel: {
                    formatter: '{value}',
                    show: true,

                    textStyle: {
                        color: '#333',
                        fontSize: 13,
                        fontWeight: 0,
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            }],
            series: [{
                name: '全园区',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: "#5784ff",
                        lineStyle: {
                            width: 1.5,
                            color: "#5784ff",
                        }
                    }
                },
                data: [767, 996, 884, 1068, 1088, 964, 1082, 979, 888, 965, 788, 1067],
            }, {
                name: 'A栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#f9ab22'
                            },
                                {
                                    offset: 1,
                                    color: '#ffcd75'
                                }
                            ]
                        )
                    }
                },
                data: [379, 288, 365, 488, 367, 567, 396, 584, 368, 588, 364, 482, ],
            }, {
                name: 'B栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#7dc855'
                            },
                                {
                                    offset: 1,
                                    color: '#abea8a'
                                }
                            ]
                        )
                    }
                },
                data: [279, 348, 265, 688, 237, 467, 256, 484, 268, 488, 264, 382, ],
            }, {
                name: 'C栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#fe5e5e'
                            },
                                {
                                    offset: 1,
                                    color: '#ff9494'
                                }
                            ]
                        )
                    }
                },
                data: [179, 248, 165, 288, 137, 367, 156, 384, 268, 388, 164, 282, ],
            }, {
                name: 'D栋',
                type: 'bar',
                barWidth: 7,
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                offset: 0,
                                color: '#b07cc5'
                            },
                                {
                                    offset: 1,
                                    color: '#d1a3e3'
                                }
                            ]
                        )
                    }
                },
                data: [79, 548, 165, 188, 37, 267, 256, 284, 168, 288, 264, 182, ],
            }, ]
        };
        //出租单元一览

        //模块二 获取父级div对象
        var buildingDetail = document.getElementById('buildingDetail');
        //模块三 折线图数组声明
        var XAxisData=[];
        var SeriesDataSum=[];

        var SeriesDataA=[];

        var SeriesDataB=[];

        var SeriesDataC=[];

        var SeriesDataD=[];

        var SeriesDataTenTenant=[];

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statData",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statData = data.data;
                console.log(statData);
                // <---------------------------模块一--------------------------->
                $("#monShoule").text(statData.modelOne.monShould);  //本月应收
                $("#monAlready").text(statData.modelOne.monAlready);  //本月已收
                $("#TenantNot").text(statData.modelOne.TenantNot);  //本月未缴户数
                $("#monTenant").text(statData.modelOne.monTenant);  //收费户数
                // <---------------------------模块二--------------------------->
                var html = '';
                //循环加载到页面
                for (var i=0;i<statData.modelTwo.length;i++){
                    html += setDiv(statData.modelTwo[i])
                }
                buildingDetail.innerHTML = html;
                // <---------------------------模块三--------------------------->
                XAxisData = statData.modelThree.dateList;
                console.log(statData);
                // SeriesDataSum = statData.modelThree.expenseList;
                SeriesDataA = statData.modelThree.buildingA;
                SeriesDataB = statData.modelThree.buildingB;
                SeriesDataC = statData.modelThree.buildingC;
                SeriesDataD = statData.modelThree.buildingD;
                SeriesDataSum = statData.modelThree.buildingSum;



                option.xAxis[0].data = XAxisData;
                option.series[0].data = SeriesDataSum;
                option.series[1].data = SeriesDataA;
                option.series[2].data = SeriesDataB;
                option.series[3].data = SeriesDataC;
                option.series[4].data = SeriesDataD;


                chartOne.setOption(option);
                //折线图渲染
                window.addEventListener("resize", function () {chartOne.resize();
                });

            }
        });
        // <---------------------------实收租金一览--------------------------->

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statDataAlraedy",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statDataAlraedy = data.data;
                console.log(statDataAlraedy);

                XAxisData = statDataAlraedy.modelfive.dateList;

                SeriesDataA = statDataAlraedy.modelfive.buildingaAlready;
                SeriesDataB = statDataAlraedy.modelfive.buildingbAlready;
                SeriesDataC = statDataAlraedy.modelfive.buildingcAlready;
                SeriesDataD = statDataAlraedy.modelfive.buildingdAlready;
                SeriesDataSum = statDataAlraedy.modelfive.buildingSumAlready;

                option2.xAxis[0].data = XAxisData;
                option2.series[0].data = SeriesDataSum;
                option2.series[1].data = SeriesDataA;
                option2.series[2].data = SeriesDataB;
                option2.series[3].data = SeriesDataC;
                option2.series[4].data = SeriesDataD;

                //折线图渲染
                chartTwo.setOption(option2)
                window.addEventListener("resize", function () {chartTwo.resize();
                });

            }
        });
        // <---------------------------五大租户收租情况--------------------------->

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statDataTenTenant",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statDataTenTenant = data.data;
                console.log(statDataTenTenant);
                XAxisData = statDataTenTenant.modelsix.tenTenantName;
                SeriesDataTenTenant = statDataTenTenant.modelsix.tenTenantMoney;
                option3.xAxis[0].data = XAxisData;
                option3.series[0].data = SeriesDataTenTenant;

                //折线图渲染
                chartThree.setOption(option3)
                window.addEventListener("resize", function () {chartThree.resize();
                });
            }
        });

        // <---------------------------租户人数预览--------------------------->

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statDataTenantNum",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statDataTenantNum = data.data;
                console.log(statDataTenantNum);

                XAxisData = statDataTenantNum.dateList;

                SeriesDataA = statDataTenantNum.buildingNumA;
                SeriesDataB = statDataTenantNum.buildingNumB;
                SeriesDataC = statDataTenantNum.buildingNumC;
                SeriesDataD = statDataTenantNum.buildingNumD;
                SeriesDataSum = statDataTenantNum.buildingNumAll;

                option5.xAxis[0].data = XAxisData;
                option5.series[0].data = SeriesDataSum;
                option5.series[1].data = SeriesDataA;
                option5.series[2].data = SeriesDataB;
                option5.series[3].data = SeriesDataC;
                option5.series[4].data = SeriesDataD;

                //折线图渲染
                chartFive.setOption(option5)
                window.addEventListener("resize", function () {chartFive.resize();
                });
            }
        });

        // <---------------------------出租单元一览--------------------------->

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statDataUnitAlready",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statDataUnitAlready = data.data;
                console.log(statDataUnitAlready);

                XAxisData = statDataUnitAlready.dateList;

                SeriesDataA = statDataUnitAlready.unitNumA;
                SeriesDataB = statDataUnitAlready.unitNumB;
                SeriesDataC = statDataUnitAlready.unitNumC;
                SeriesDataD = statDataUnitAlready.unitNumD;
                SeriesDataSum = statDataUnitAlready.unitNumAll;

                option6.xAxis[0].data = XAxisData;
                option6.series[0].data = SeriesDataSum;
                option6.series[1].data = SeriesDataA;
                option6.series[2].data = SeriesDataB;
                option6.series[3].data = SeriesDataC;
                option6.series[4].data = SeriesDataD;

                //折线图渲染
                chartSix.setOption(option6)
                window.addEventListener("resize", function () {chartSix.resize();
                });

            }
        });
        // <---------------------------涨租情况一览--------------------------->
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "system/stat/statDataHighStat",
            async : true,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                var statDataHighStat = data.data;
                console.log(statDataHighStat);

                XAxisData = statDataHighStat.dateList;

                SeriesDataHighStat = statDataHighStat.highNum;
                SeriesDataHighStatNum = statDataHighStat.highTenantNum;

                option4.xAxis[0].data = XAxisData;
                option4.series[0].data = SeriesDataHighStat;
                option4.series[1].data = SeriesDataHighStatNum;

                //折线图渲染
                chartFour.setOption(option4)
                window.addEventListener("resize", function () {chartFour.resize();
                });

            }
        });
    })

</script>
</body>
</html>